<template>
	<ve-dialog
		width="450px"
		:title="title"
		:show.sync="isShow"
		:show-close="true"
	>
		<el-form
			v-loading="isLoading"
			label-width="100px"
			label-suffix="："
			:model="formData"
			:rules="rules"
			ref="form"
		>
			<el-form-item label="是否必填" prop="isRequired">
				<el-radio v-model="formData.isRequired" label="Y">必填</el-radio>
				<el-radio v-model="formData.isRequired" label="N">非必填</el-radio>
			</el-form-item>
			<el-form-item label="项目" prop="projectVos">
				<cascader-project
					ref="projectCascader"
					v-model="formData.projectVos"
					:has-all-project="true"
					:props-options="{multiple: true}"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="isShow = false">取 消</el-button>
			<el-button type="primary" :loading="isLoading" @click="onSubmit">保 存</el-button>
		</template>
	</ve-dialog>
</template>

<script>
	import tagApi from "@rc/apis/rc/tag.mjs";

	import CascaderProject from "@rc/pages/components/async/cascader-project.vue";

	export default {
		props: {
			// 是否显示弹窗,可通过.sync进行绑定
			visibly: {
				type: Boolean,
				default: false
			},
			// 修改的类型
			theirType: {
				type: String,
				required: true
			}
		},
		components: {
			CascaderProject
		},
		data() {
			return {
				isShow: this.visibly, // 内部的是否显示弹窗
				isLoading: false, // 加载或提交状态
				formData: {
					isRequired: "Y", // 是否必填
					projectVos: [] // 选中的项目集合
				}
			};
		},
		computed: {
            // 弹窗标题
			title() {
				switch (this.theirType) {
					case "C":
						return "章节设置编辑";
					case "K":
						return "知识点设置编辑";
				}
				return "";
			},
            // 表单校验规则
			rules() {
				return {
					isRequired: [{ required: true, message: "请选择是否必填", trigger: "change" }],
					projectVos: [{ required: this.formData.isRequired === 'Y', message: "如果必填则项目不能为空", trigger: "change" }]
				};
			}
		},
		watch: {
			// 内部和外部的变量双向绑定
			isShow(val) {
				this.$emit("update:visibly", val);
			},
			visibly(val) {
				this.isShow = val;
			}
		},
		methods: {
			// 提交表单
			onSubmit() {
				this.$refs.form.validate((isValid) => {
					if (!isValid) {
						return false;
					}
					const params = JSON.parse(JSON.stringify(this.formData));
					params.projectVos = this.$refs.projectCascader.api_getCheckedNodes(); // 获取选中的全部节点
					params.projectVos = params.projectVos.filter((i) => !i.hasChildren); // 过滤掉父级节点
					params.projectVos = params.projectVos.map((i) => ({ projectId: i.value, projectName: i.label })); // 根据后端需要的格式进行格式化
					this.isLoading = true;
					tagApi.editChapterKnowledge({
						data: {
							...params,
							theirType: this.theirType
						},
						success: () => {
							this.$message.success("修改成功");
							this.isShow = false;
							this.$emit("success");
						},
						complete: () => {
							this.isLoading = false;
						}
					});
				});
			}
		},
		created() {
			// 查询详情，初始化数据
			this.isLoading = true;
			tagApi.queryChapterKnowledgeInfo({
				data: {
					theirType: this.theirType
				},
				success: (data) => {
					this.formData.isRequired = data.isRequired;
					this.formData.projectVos = data.projectVos.map((i) => i.projectId);
				},
				complete: () => {
					this.isLoading = false;
				}
			});
		}
	};
</script>
